<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>music1</title>

    <style>
        body {
            width: 65%;
            position: absolute;
            left: 10%;
        }
        
        .song-list {
            width: 130%;
            list-style-type: none;
            padding: 0;
            border: 2px solid #ccc;
            /* 添加一个大边框 */
            border-radius: 10px;
            /* 添加边框圆角 */
        }
        
        .song-info {
            display: flex;
            align-items: center;
        }
        
        .song-title {
            font-weight: bold;
            width: 150px;
            /* 调整歌曲标题的宽度 */
        }
        
        .song-artist {
            color: #888;
            width: 150px;
            /* 调整歌手名称的宽度 */
        }
        
        .song-player {
            width: 200px;
            /* 调整播放器的宽度 */
        }
        
        .song-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
        
        .song-item .song-title {
            font-weight: bold;
        }
        
        .song-item .song-artist {
            color: #888;
        }
    </style>
</head>

<body>
    <!-- 存放音频的源地址：https://websiteforwyh.github.io/music/AudioFile/audio.html -->
    <ul class="song-list" id="song-list">
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">迷失幻境</div>
                <div class="song-artist">王忻辰</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/%E8%BF%B7%E5%A4%B1%E5%B9%BB%E5%A2%83-%E7%8E%8B%E5%BF%BB%E8%BE%B0.mp3" type="audio/mp3">                  
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">come back for you</div>
                <div class="song-artist">葛林</div>
                <div class="song-player">
                    <audio controls>
                        <source src="ComeBackForYou-Matluck-Elephante.m4a" type="audio/mp3">                  
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">书里说</div>
                <div class="song-artist">鱼儿七</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/%E4%B9%A6%E9%87%8C%E8%AF%B4-%E9%B1%BC%E5%84%BF%E4%B8%83.mp3" type="audio/mp3">                  
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">雨过天不晴</div>
                <div class="song-artist">柯柯柯啊</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/%E9%9B%A8%E8%BF%87%E5%A4%A9%E4%B8%8D%E6%99%B4-%E6%9F%AF%E6%9F%AF%E6%9F%AF%E5%95%8A.mp3" type="audio/mp3">                  
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">半生</div>
                <div class="song-artist">张磊</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/%E5%8D%8A%E7%94%9F-%E5%BC%A0%E7%A3%8A.mp3" type="audio/mp3">                  
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">自愈</div>
                <div class="song-artist">穆哲熙</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/%E8%87%AA%E6%84%88-%E7%A9%86%E5%93%B2%E7%86%99.mp3" type="audio/mp3">                  
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">Attention</div>
                <div class="song-artist">Charlie Puth</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/Attention-CharliePuth.mp3" type="audio/mp3">                  
                    </audio>
                </div>
            </div>
        </li>
        <li class="song-item">
            <div class="song-info">
                <div class="song-title">New Ting</div>
                <div class="song-artist">Marec E.Bassy</div>
                <div class="song-player">
                    <audio controls>
                        <source src="https://websiteforwyh.github.io/music/AudioFile/NewTing-MarcE.Bassy.m4a" type="audio/mp3">                  
                    </audio>
                </div>
            </div>
        </li>
    </ul>

    <!-- 屏幕大小兼容性设置 -->
    <script>
        var s = window.screen;
        console.log("screenwidth=" + s.width);
        var songlist = document.getElementById("song-list");
        var songtitle = document.getElementsByClassName("song-title");
        console.log("songlist.width=" + getComputedStyle(songlist).width);
        if (s.width <= 1344) {
            songlist.style.width = "135%";
            // for (var i = 0; i < songtitle.length; i++) {
            //     songtitle[i].style.width = "135px";
            // }


            console.log("songlist的宽度改成了: " + songlist.style.width);
        }
    </script>

</body>

</html>